<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - DNS管理系统</title>
    
    <!-- Bootstrap 5 CSS -->
    {% load static %}
    <link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
    
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="{% static 'vendor/bootstrap-icons/bootstrap-icons.css' %}">
    
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .login-card {
            backdrop-filter: blur(20px);
            background: rgba(255, 255, 255, 0.95);
            border: none;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        .login-header {
            background: linear-gradient(135deg, #007bff, #0056b3);
            color: white;
            padding: 2rem;
            text-align: center;
        }
        
        .login-icon {
            width: 80px;
            height: 80px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            font-size: 2rem;
        }
        
        .form-control {
            border-radius: 12px;
            padding: 0.75rem 1rem;
            border: 2px solid #e9ecef;
            transition: all 0.3s ease;
        }
        
        .form-control:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
        }
        
        .btn-primary {
            border-radius: 12px;
            padding: 0.75rem 2rem;
            font-weight: 600;
            background: linear-gradient(135deg, #007bff, #0056b3);
            border: none;
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4);
        }
        
        .floating-elements {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }
        
        .floating-element {
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
        }
    </style>
</head>
<body>
    <!-- 浮动装饰元素 -->
    <div class="floating-elements">
        <div class="floating-element" style="width: 60px; height: 60px; top: 20%; left: 10%; animation-delay: 0s;"></div>
        <div class="floating-element" style="width: 80px; height: 80px; top: 60%; left: 80%; animation-delay: 2s;"></div>
        <div class="floating-element" style="width: 40px; height: 40px; top: 30%; left: 70%; animation-delay: 4s;"></div>
        <div class="floating-element" style="width: 100px; height: 100px; top: 70%; left: 20%; animation-delay: 1s;"></div>
    </div>

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-5 col-md-7">
                <div class="card login-card">
                    <div class="login-header">
                        <div class="login-icon">
                            <i class="bi bi-cloud-arrow-up"></i>
                        </div>
                        <h3 class="mb-0">DNS管理系统</h3>
                        <p class="mb-0 opacity-75">多云域名解析管理平台</p>
                    </div>
                    
                    <div class="card-body p-4">
                        {% if form.errors %}
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                <i class="bi bi-exclamation-triangle me-2"></i>
                                {% for field, errors in form.errors.items %}
                                    {% for error in errors %}
                                        {{ error }}<br>
                                    {% endfor %}
                                {% endfor %}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        {% endif %}
                        
                        <form method="post" class="needs-validation" novalidate>
                            {% csrf_token %}
                            
                            <div class="mb-3">
                                <label for="{{ form.username.id_for_label }}" class="form-label fw-semibold">
                                    <i class="bi bi-person me-2"></i>用户名
                                </label>
                                <input type="text" 
                                       class="form-control" 
                                       id="{{ form.username.id_for_label }}"
                                       name="{{ form.username.name }}" 
                                       placeholder="请输入用户名"
                                       required>
                                <div class="invalid-feedback">
                                    请输入用户名
                                </div>
                            </div>
                            
                            <div class="mb-4">
                                <label for="{{ form.password.id_for_label }}" class="form-label fw-semibold">
                                    <i class="bi bi-lock me-2"></i>密码
                                </label>
                                <div class="position-relative">
                                    <input type="password" 
                                           class="form-control" 
                                           id="{{ form.password.id_for_label }}"
                                           name="{{ form.password.name }}" 
                                           placeholder="请输入密码"
                                           required>
                                    <button type="button" 
                                            class="btn btn-link position-absolute end-0 top-50 translate-middle-y text-muted"
                                            onclick="togglePassword()">
                                        <i class="bi bi-eye" id="toggleIcon"></i>
                                    </button>
                                </div>
                                <div class="invalid-feedback">
                                    请输入密码
                                </div>
                            </div>
                            
                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="bi bi-box-arrow-in-right me-2"></i>立即登录
                                </button>
                            </div>
                            
                            {% if next %}
                                <input type="hidden" name="next" value="{{ next }}">
                            {% endif %}
                        </form>
                        
                        <hr class="my-4">
                        
                        <div class="text-center">
                            <p class="text-muted mb-3">
                                <small>
                                    <i class="bi bi-info-circle me-1"></i>
                                    默认管理员账号请通过 <code>python manage.py createsuperuser</code> 创建
                                </small>
                            </p>
                            
                            <div class="row text-center">
                                <div class="col-3">
                                    <div class="text-primary mb-1">
                                        <i class="bi bi-cloud" style="font-size: 1.5rem;"></i>
                                    </div>
                                    <small class="text-muted">阿里云</small>
                                </div>
                                <div class="col-3">
                                    <div class="text-success mb-1">
                                        <i class="bi bi-cloud" style="font-size: 1.5rem;"></i>
                                    </div>
                                    <small class="text-muted">腾讯云</small>
                                </div>
                                <div class="col-3">
                                    <div class="text-warning mb-1">
                                        <i class="bi bi-cloud" style="font-size: 1.5rem;"></i>
                                    </div>
                                    <small class="text-muted">华为云</small>
                                </div>
                                <div class="col-3">
                                    <div class="text-danger mb-1">
                                        <i class="bi bi-cloud" style="font-size: 1.5rem;"></i>
                                    </div>
                                    <small class="text-muted">火山引擎</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="text-center mt-4">
                    <p class="text-white-50">
                        <i class="bi bi-c-circle me-1"></i>2024 DNS管理系统 - 统一管理多云DNS解析
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS -->
    <script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
    
    <script>
        // 表单验证
        (function() {
            'use strict';
            window.addEventListener('load', function() {
                var forms = document.getElementsByClassName('needs-validation');
                var validation = Array.prototype.filter.call(forms, function(form) {
                    form.addEventListener('submit', function(event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();
        
        // 密码显示/隐藏切换
        function togglePassword() {
            const passwordField = document.getElementById('{{ form.password.id_for_label }}');
            const toggleIcon = document.getElementById('toggleIcon');
            
            if (passwordField.type === 'password') {
                passwordField.type = 'text';
                toggleIcon.className = 'bi bi-eye-slash';
            } else {
                passwordField.type = 'password';
                toggleIcon.className = 'bi bi-eye';
            }
        }
        
        // 页面加载动画
        document.addEventListener('DOMContentLoaded', function() {
            document.body.style.opacity = '0';
            document.body.style.transform = 'translateY(20px)';
            document.body.style.transition = 'all 0.5s ease';
            
            setTimeout(() => {
                document.body.style.opacity = '1';
                document.body.style.transform = 'translateY(0)';
            }, 100);
        });
    </script>
</body>
</html>